<template>
  <div class="goods-list" >
    <div class="content-card sa-flex-col">
      <div class="scrollbar-item" v-for="(item,index) in compData.data.goodsList" :key="index">
          <div class="goods-img sa-flex-row ss-row-center ss-col-center">
                <sa-preview :url="item.image" size="60"></sa-preview>
          </div>
          <div class="goods-info">
            <div class="goods-title">{{item.title}}</div>
            <div class="goods-desc">{{ item?.desc||''}}</div>
            <div class="goods-price">仅需：￥{{item.price[0]}}</div>
            <div class="goods-subtitle">{{item.subtitle}}</div>
          </div>
          <img src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/holiday/20250428/b301f7db9322acdc2eee24cd6d1c777a.png" class="go-img" style="width: 38px;
height: 38px;"/>
      </div>
    </div>
    
  </div>
</template>

<script setup>
import { computed,onMounted } from 'vue';
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
const imgUrl=import.meta.env.SHEEP_IMG_URL
const props = defineProps(['compData']);

function handlerSrc(item){
  return imgUrl+item.image;
}

onMounted(()=>{
  console.log('compData.data.goodsList',props.compData.data.goodsList)
})

</script>
<style lang="scss" scoped>
.goods-list{
  position:relative;
  display: flex;
  padding-top:60px;
  height: 1250px;
  background: rgba(255,255,255,0.8);

  
}

.content-card{
  width:100%;
  margin-top:60px;
  margin-left:40px;
  margin-right:37px;
}



.scrollbar-item {
  
  position:relative;
  padding-top:12px;
  height: 107px;
  background: rgba(71,177,232,0.17) !important;
  border-radius: 12px;
 
  display: flex;
  flex-direction:row;
  align-items: flex-start;

  margin-bottom:10px;

}


.goods-img{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  width: 78px;
  height: 78px;
  background-color: #fff;
}

.goods-desc{
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 13px;
  color: #6B94E4;
  line-height: 13px;
}

.goods-info{
  flex: 1;
  margin-left:10px;
  width: 100%;
  
}

.goods-title{
  width:130px;
  height: 32px;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 14px;
  color: #1949A9;
  line-height: 16px;

  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 2; 
  overflow: hidden; 
  text-overflow: ellipsis;

}
.goods-price{
  width:100px;
  margin-top:5px;
  height: 25px;
  background: linear-gradient(87deg, #E72929, #F76161);
  box-shadow: 1px 4px 6px 0px rgba(166,227,255,0.85), 1px 3px 5px 0px rgba(255,255,255,0.23);
  border-radius: 9px;
  border: 1px solid #94E2FF;


  font-weight: normal;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 12px;

  display:flex;
  justify-content:center;
  align-items:center;
}

.goods-subtitle{
  margin-top:6px;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 10px;
  color: #1949A9;
  line-height: 10px;
}

.go-img{
  position:absolute;
  right:5px;
  bottom:15px;
}

</style>
